<template>
  <div>
    <!-- 新增 修改 -->
    <el-dialog width="90%" title="卖家用户" destroy-on-close append-to-body :visible.sync="show" :before-close="cancel">
      <el-row style="margin-bottom: 10px">
        <el-button
          plain
          type="primary"
          @click="handleAdd"
          size="mini"
          v-hasPermi="['distribution:user:insertSellerUserByDistrId']"
        >
          新增用户
        </el-button>
      </el-row>
      <el-table ref="TableRef" :data="tableData">
        <!-- 租用户名 用户角色 状态 最后登录时间 最后登录IP 操作 -->

        <!-- 租用户名 -->
        <el-table-column show-overflow-tooltip align="center" label="租户名" prop="distrName" />
        <!-- 用户角色 -->
        <el-table-column show-overflow-tooltip align="center" label="用户角色" prop="roleName" />
        <!-- 昵称 -->
        <el-table-column show-overflow-tooltip align="center" label="昵称" prop="nickName" />
        <el-table-column show-overflow-tooltip align="center" label="账号" prop="userName" />
        <!-- 邮箱 -->
        <el-table-column show-overflow-tooltip align="center" label="邮箱" prop="email" />
        <!-- 状态 -->
        <el-table-column show-overflow-tooltip align="center" label="状态" prop="status">
          <!-- 帐号状态 0:正常 1:停用 -->
          <template slot-scope="{ row }">
            <!-- 帐号状态 0:正常 1:停用 -->
            <el-switch
              :disabled="!hasPermission('distribution:user:updateUserStatus')"
              v-model="row.status"
              :active-value="'0'"
              :inactive-value="'1'"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <!-- 最后登录时间 -->
        <el-table-column show-overflow-tooltip align="center" label="最后登录时间" prop="loginDate" />
        <el-table-column show-overflow-tooltip align="center" label="是否管理员" prop="isAdmin">
          <!-- 是否管理员 0:否 1:是 -->
          <template slot-scope="{ row }">
            <div v-if="row.isAdmin == 1" style="color: red">{{ $t('是') }}</div>
            <div v-else style="color: blue">{{ $t('否') }}</div>
          </template>
        </el-table-column>
        <!-- 最后登录IP -->
        <el-table-column show-overflow-tooltip align="center" label="最后登录IP" prop="loginIp" />
        <!-- 操作 -->
        <el-table-column show-overflow-tooltip align="center" :label="$t('操作')" prop="orderNo">
          <template slot-scope="{ row }">
            <el-dropdown @command="(command) => handleCommand(command, row)">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right"> 更多 </el-button>
              <el-dropdown-menu slot="dropdown">
                <!-- v-hasPermi="['system:user:resetPwd']" -->
                <!--
                  修改信息
                  修改密码
                  禁用/启用
                -->
                <el-dropdown-item command="editInfo" v-hasPermi="['distribution:user:updateSellerUserByDistrId']">
                  修改信息
                </el-dropdown-item>
                <el-dropdown-item
                  command="handleUpdatePwd"
                  v-hasPermi="['distribution:user:updatePassword']"
                >
                  修改密码
                </el-dropdown-item>
                <!-- 管理员不能删除 -->
                <el-dropdown-item
                  v-show="row.isAdmin != 1 && $store.state.user.userType != 'sys_user'"
                  command="delUserByUserId"
                  v-hasPermi="['distribution:user:delUserByUserId']"
                >
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增修改 -->
    <AddAndEditUser
      :show.sync="addAndEditUser.show"
      @getList="getList"
      :formData="addAndEditUser.formData"
      :type="addAndEditUser.type"
    />
    <!-- 修改密码 -->
    <EditPassword :show.sync="editPassword.show" @getList="getList" :formData="editPassword.formData" />
  </div>
</template>

<script>
import { checkOps } from '@/api/platform/supplierManage'
import { delUserByUserId } from '@/api/platform/platformUsers'

import { updateUserStatus } from '@/api/platform/supplierManage'
import { getSellerUserListByDistrId, updateSellerUserByDistrId } from '@/api/platform/sellerManage'
import AddAndEditUser from './addAndEditUser.vue'
import EditPassword from './editPassword.vue'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { AddAndEditUser, EditPassword },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**新增/修改 用户 */
      addAndEditUser: {
        show: false,
        type: '',
        formData: {},
      },
      /**修改密码 */
      editPassword: {
        show: false,
        formData: {},
      },
      tableData: [],
      form: {},
      // 表单校验
      rules: {
        // distrId: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    hasPermission(str) {
      return checkPermi([str])
    },
    // 帐号状态 status  0:正常 1:停用
    handleStatusChange(row) {
      const data = {
        ...row,
        targetRoleId: row.roleId,
      }
      console.log(`data ==>`, JSON.parse(JSON.stringify(data)))
      updateUserStatus(data)
        .then((res) => {
          const { code, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.getList()
          }
        })
        .catch(() => {
          row.status == '0' ? (row.status = '1') : (row.status = '0')
        })
    },
    handleCommand(command, row) {
      switch (command) {
        case 'editInfo':
          this.addAndEditUser.formData = row
          this.addAndEditUser.type = 'edit'
          this.addAndEditUser.show = true
          break
        case 'handleUpdatePwd' /**修改密码 */:
          this.editPassword.formData = row
          this.editPassword.show = true
          break
        case 'delUserByUserId' /**删除 */:
          this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
            type: 'warning',
          }).then(() => {
            const data = {
              id: row.userId,
              distrId: JSON.parse(localStorage.getItem('distr') || '{}').distrId,
            }
            delUserByUserId(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })

              this.getList()
            })
          })
          break
        default:
          break
      }
    },
    getList() {
      getSellerUserListByDistrId(this.formData.id).then((res) => {
        this.tableData = res.data
      })
    },
    handleAdd() {
      checkOps(1).then((res) => {
        const { code } = res
        if (code === 200) {
          this.addAndEditUser.type = 'add'
          this.addAndEditUser.formData = this.formData
          this.addAndEditUser.show = true
        }
      })
    },
    handleEdit(row) {
      this.addAndEditUser.type = 'add'
      this.addAndEditUser.formData = row
      this.addAndEditUser.show = true
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
